<template>
    <div class="buy-show">
        <div v-if="!goodsBoxs.isNeedScroll">
            <h4 class="bus-show-title" v-if="(!goodsBoxs.titleInfo || !goodsBoxs.titleInfo.type) && goodsBoxs.title">
                {{goodsBoxs.title}}
            </h4>
            <div class="self-title-height"
                 v-else-if="goodsBoxs.titleInfo && goodsBoxs.titleInfo && goodsBoxs.titleInfo.type == 'oneLine'">
                <div class="self-title-wrap displayFlex justifyCtBwt flex-algin-center">
                <span class="title-top">
                    {{goodsBoxs.title}}
                    <span class="my-self"
                          v-if="goodsBoxs.titleInfo && goodsBoxs.titleInfo && goodsBoxs.titleInfo.leftText"
                          v-html="goodsBoxs.titleInfo.leftText"></span>
                </span>
                    <span class="firend-help-btn"
                          v-if="goodsBoxs.titleInfo && goodsBoxs.titleInfo && goodsBoxs.titleInfo.rightText"
                          v-html="goodsBoxs.titleInfo.rightText" @click="$emit('titleRightBtn')"></span>
                </div>
            </div>
            <div class="box-item displayFlex justifyCtBwt user-touch" ref="boxItemWrap">
                <div class="buy-item-wrap" v-for="boxItem in goodsBoxs.list">
                    <img class="buy-item-img" v-if="goodsBoxs.isLazy" v-lazy="boxItem.url" alt="">
                    <img class="buy-item-img" v-else :src="boxItem.url" alt="">
                    <video v-if="false" :src="boxItem.url"></video>
                    <div class="buy-item-wuser displayFlex positionR"
                         @click="$emit('clickBoxItem',{goodsId:boxItem.itemId,storeId:boxItem.storeId})">
                    <span class="remark" v-if="boxItem.remark && boxItem.remark.text"
                          :style="{backgroundColor:boxItem.remark && boxItem.remark.backgroundColor ? boxItem.remark.backgroundColor : '#F57145'}">
                        {{boxItem.remark.text}}
                    </span>
                        <div>
                            <!--标题-->
                            <div class="buy-item-content" :class="{'one-line-ellepsis':boxItem.titleOneLine,'two-line-ellepsis':!boxItem.titleOneLine}">
                                {{boxItem.itemTitle}}
                            </div>
                            <!--价格的左右结构-->
                            <div v-if="boxItem.type==1" class="buy-user-msg displayFlex justifyCtBwt" >
                            <span class="buy-user-left" v-if="boxItem.price">
                                {{boxItem.currency}}<span>{{boxItem.price}}</span>
                            </span>
                                <span class="buy-user-right" v-if="boxItem.buyerNum">
                                <span>{{boxItem.buyerNum}}</span>
                            </span>
                            </div>
                            <!--文字的左右结构-->
                            <div v-else-if="boxItem.type==2" class="buy-user-msg displayFlex justifyCtBwt">
                            <span class="buy-user-left">
                                <img v-for="value in 3" class="star-light"
                                     src="../../../assets/images/store/star_light.png" alt="">
                            </span>
                                <span class="buy-user-right">
                                <span>{{getTime(boxItem.time)}}</span>
                            </span>
                            </div>
                            <!--有人头像的左右结构-->
                            <div v-else-if="boxItem.type==3" class="buy-user-msg displayFlex justifyCtBwt">
                            <span class="buy-user-left" v-if="boxItem.userInfo">
                                <img class="star-user-header" v-if="boxItem.userInfo.header"
                                     :src="boxItem.userInfo.header" alt="">
                                <span class="user-name" v-if="boxItem.userInfo.name">{{boxItem.userInfo.name}}</span>
                            </span>
                            <span class="buy-user-right" v-if="boxItem.userInfo" @click="$emit('doLike',boxItem)">
                                <img class="user-like-icon" v-if="boxItem.userInfo.like"
                                     :src="boxItem.userInfo.selectUrl" alt="">
                                <img class="user-like-icon" v-else :src="boxItem.userInfo.notSelectUrl" alt="">
                                <span class="user-un-num" v-if="boxItem.userInfo.num && boxItem.userInfo.num > 0">{{gtTenThousand(boxItem.userInfo.num)}}</span>
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="goodsBoxs.isShowMore" class="buy-show-more">查看更多 <span
                        class="iconfont icon-arrows_down"></span></div>
            </div>
        </div>
        <div v-if="goodsBoxs.isNeedScroll" id="scroller">
            <scroller
                ref="myscroller"
                :on-refresh="refresh"
                :on-infinite="infinite">
                <div class="scroll-contain">
                    <h4 class="bus-show-title"
                        v-if="(!goodsBoxs.titleInfo || !goodsBoxs.titleInfo.type) && goodsBoxs.title">
                        {{goodsBoxs.title}}
                    </h4>
                    <div class="self-title-height"
                         v-else-if="goodsBoxs.titleInfo && goodsBoxs.titleInfo && goodsBoxs.titleInfo.type == 'oneLine'">
                        <div class="self-title-wrap displayFlex justifyCtBwt flex-algin-center">
                <span class="title-top">
                    {{goodsBoxs.title}}
                    <span class="my-self"
                          v-if="goodsBoxs.titleInfo && goodsBoxs.titleInfo && goodsBoxs.titleInfo.leftText"
                          v-html="goodsBoxs.titleInfo.leftText"></span>
                </span>
                            <span class="firend-help-btn"
                                  v-if="goodsBoxs.titleInfo && goodsBoxs.titleInfo && goodsBoxs.titleInfo.rightText"
                                  v-html="goodsBoxs.titleInfo.rightText" @click="$emit('titleRightBtn')"></span>
                        </div>
                    </div>
                    <div class="box-item displayFlex justifyCtBwt user-touch" ref="boxItemWrap">
                        <div class="buy-item-wrap" v-for="(boxItem,boxKey) in goodsBoxs.list" @click="clickItem(boxItem,boxKey)">
                            <img class="buy-item-img" v-if="goodsBoxs.isLazy" :src="boxItem.url" alt="">
                            <img class="buy-item-img" v-else :src="boxItem.url" alt="">
                            <transition name="smallBall"
                                        @enter="ballEnter(boxItem,boxKey)">
                                <!-- v-if="boxItem.needSmallBall && showBallIndex == boxKey"-->
                                <img class="buy-item-img small-ball positionAbCenter" ref="needSmallBall" v-if="boxItem.needSmallBall && showBallIndex == boxKey" :src="boxItem.url" />
                            </transition>
                            <video v-if="false" :src="boxItem.url"></video>
                            <div class="buy-item-wuser displayFlex positionR"
                                 @click="$emit('clickBoxItem',{goodsId:boxItem.itemId,storeId:boxItem.storeId})">
                                <span class="remark" v-if="boxItem.remark && boxItem.remark.text"
                                      :style="{backgroundColor:boxItem.remark && boxItem.remark.backgroundColor ? boxItem.remark.backgroundColor : '#F57145'}">
                                    {{boxItem.remark.text}}
                                </span>
                                <div>
                                    <!--标题-->
                                    <div class="buy-item-content" :class="{'one-line-ellepsis':boxItem.titleOneLine,'two-line-ellepsis':!boxItem.titleOneLine}">
                                        {{boxItem.itemTitle}}
                                    </div>
                                    <!--价格的左右结构-->
                                    <div v-if="boxItem.type==1" class="buy-user-msg displayFlex justifyCtBwt">
                                        <span class="buy-user-left" v-if="boxItem.price">
                                            {{boxItem.currency}}<span>{{boxItem.price}}</span>
                                        </span>
                                            <span class="buy-user-right" v-if="boxItem.buyerNum">
                                            <span>{{boxItem.buyerNum}}</span>
                                        </span>
                                    </div>
                                    <!--文字的左右结构-->
                                    <div v-else-if="boxItem.type==2" class="buy-user-msg displayFlex justifyCtBwt">
                                        <span class="buy-user-left">
                                            <img v-for="value in 3" class="star-light"
                                                 src="../../../assets/images/store/star_light.png" alt="">
                                        </span>
                                        <span class="buy-user-right">
                                            <span>{{getTime(boxItem.time)}}</span>
                                        </span>
                                    </div>
                                    <!--有人头像的左右结构-->
                                    <div v-else-if="boxItem.type==3" class="buy-user-msg displayFlex justifyCtBwt">
                                        <span class="buy-user-left" v-if="boxItem.userInfo">
                                            <img class="star-user-header" v-if="boxItem.userInfo.header"
                                                 :src="boxItem.userInfo.header" alt="">
                                            <span class="user-name"
                                                  v-if="boxItem.userInfo.name">{{boxItem.userInfo.name}}</span>
                                        </span>
                                            <span class="buy-user-right" v-if="boxItem.userInfo"
                                                  @click="$emit('doLike',boxItem)">
                                            <img class="user-like-icon" v-if="boxItem.userInfo.like"
                                                 :src="boxItem.userInfo.selectUrl" alt="">
                                            <img class="user-like-icon" v-else :src="boxItem.userInfo.notSelectUrl" alt="">
                                            <span class="user-un-num"
                                                  v-if="boxItem.userInfo.num && boxItem.userInfo.num > 0">{{gtTenThousand(boxItem.userInfo.num)}}</span>
                                        </span>
                                    </div>
                                    <div v-else-if="boxItem.type==4" class="buy-user-msg displayFlex justifyCtBwt">
                                        <span class="buy-user-left" v-if="boxItem.price">
                                            {{boxItem.currency}}<span>{{boxItem.price}}</span>
                                        </span>
                                        <span class="buy-user-right">
                                            <span class="buy-user-right-number positionR" @click.stop="doAddCart(boxKey,boxItem)">
<!--                                                <span class="iconfont icon-add"></span>-->
                                                <img class="add-cart-icon" src="../../../assets/images/store/add_cart.png" alt="">
                                                <span class="box-buyer-num"  v-if="boxItem.buyerNum">{{boxItem.buyerNum}}</span>
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-if="goodsBoxs.isShowMore" class="buy-show-more">查看更多
                            <span class="iconfont icon-arrows_down"></span>
                        </div>
                    </div>
                </div>
            </scroller>
        </div>
    </div>
</template>
<script>
    export default {
        name: "boxItem",
        props: {
            goodsBoxsProp: Object
        },
        data() {
            return {
                goodsBoxs: {
                    curPage:1,
                    totalPages:1,
                    isNeedScroll: true,//是否需要滚动条
                    id: 0,//用于区分多个goodsBox组件
                    title: "",/*@title goodsBoxs 标题*/
                    isLazy:false,
                    // titleInfo:{
                    //     type:"oneLine",
                    //     leftText:"oneLine",
                    //     rightText:"oneLine",
                    // },/*@title goodsBoxs 标题*/
                    isShowMore: false,/*@isShowMore 是否显示查看更多*/
                    list: [/*@list boxitem的列表个数*/
                        // {
                        //     storeId:0,
                        //     id:0,//用于区分多个goodsBox组件
                        //     type:1,//1表示两端布局，价格和卖出商品量,2表示一边是评价一边是日期
                        //     itemId:0,//商品id
                        //     currency:"￥",/*金币的符号*/
                        //     needSmallBall:false,//type 为4 "是否需要小球飞入"
                        //     url:'',/*@url 图片或者视频的url*/
                        //     titleOneLine:false,
                        //     itemTitle:'',/*@description 描述*/
                        //     price:'',/*@description 价格*/
                        //     buyerNum:'',/*@buyerNum 已购买件数*/
                        //     time:0,/*@time时间，当type为2时填写*/
                        //     remark:{text:'NO.1',backgroundColor:''},
                        //     userInfo:{header:'',name:'',like:'',num:'',url:'',selectUrl:'',notSelectUrl:''},
                        // }
                    ],
                },
                showBallIndex:-1,
            }
        },
        mounted() {
            this.goodsBoxs = Object.assign({}, this.goodsBoxs, this.goodsBoxsProp);
        },
        methods:{
            doAddCart(index,value){
                let boxItem = Object.assign({},value,{needAddAnmation:true,belongSwiperIndex:index});
                this.$store.commit('setShowSlide',{show:false})
                this.$emit('addCart',boxItem);
            },
            showSmallBall(obj){
                let that = this;
                this.goodsBoxs.list.forEach((value,index)=>{
                    if(obj.itemId == value.itemId){
                        that.showBallIndex = index;
                    }
                })
            },
            ballEnter(msg,index){
                let that = this;
                this.$refs.needSmallBall[0].style.transition = 'all 500ms';
                this.$refs.needSmallBall[0].style.transformOrigin = 'center center';
                setTimeout(()=>{
                    this.$refs.needSmallBall[0].style.width = '.32rem';
                    this.$refs.needSmallBall[0].style.height = '.32rem';

                    let iconPos = this.getDomLeaveScreen(document.getElementsByClassName('buy-icon')[0]);
                    let iconOffsetX = iconPos.left;
                    let iconOffsetY = iconPos.top;

                    let domPos = this.getDomLeaveScreen(that.$refs.needSmallBall[0]);
                    let domX = domPos.left;
                    let domY = domPos.top;
                    let domClientWidth = document.getElementsByClassName('buy-icon')[0].clientWidth;
                    let domClientHeight = document.getElementsByClassName('buy-icon')[0].clientHeight;

                    let domLeft = iconOffsetX - domX - 2 * domClientWidth;//这里不应该乘以2，但是由于购物袋和小球大小一样所以用乘以2
                    let domTop = iconOffsetY - domY - 2 * domClientHeight;
                    let domTransformY = document.getElementsByClassName('_v-content')[0].style.transform.replace(/[^0-9\-\.,]/g,'').split(',')[1];
                    domTop -= domTransformY;
                    setTimeout(()=>{
                        this.$refs.needSmallBall[0].style.transform = 'translate('+domLeft+'px,'+domTop+'px)';
                        setTimeout(()=>{
                            that.showBallIndex = - 1;
                            that.$emit('finishAnimation',msg);
                        },400)
                    },400)
                },10)
            },
            clickItem(boxItem,boxKey){
                this.$emit('clickItem',boxItem,boxKey);
            },
            refresh(){
                this.goodsBoxs.curPage = 1;
                this.goodsBoxs.notHref = true;
                this.goodsBoxs.isMore = false;
                this.$emit('updateGoodsMsg',this.goodsBoxs)
                setTimeout(()=>{
                    if(this.$refs && this.$refs.myscroller && this.$refs.myscroller.finishPullToRefresh){
                        this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
                    }
                },500)
            },
            infinite(){
                this.$refs.myscroller.finishInfinite(true);//刷新完毕关闭刷新的转圈圈
                this.goodsBoxs.curPage ++;
                this.goodsBoxs.notHref = true;
                this.goodsBoxs.isMore = true;
                this.$emit('updateGoodsMsg',this.goodsBoxs)
                setTimeout(()=>{
                    /*do*/
                    if(this.$refs && this.$refs.myscroller && this.$refs.myscroller.finishPullToRefresh){
                        this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
                    }
                },500)
            }
        },
        watch: {
            goodsBoxsProp(val) {
                this.goodsBoxs = Object.assign({}, this.goodsBoxs, val);
            }
        }
    }
</script>

<style scoped lang="scss">
    .buy-item-content {
        padding-bottom: .03rem;
    }

    .box-item {
        flex-wrap: wrap;
        -webkit-transition: all 300ms;
        -moz-transition: all 300ms;
        -ms-transition: all 300ms;
        -o-transition: all 300ms;
        transition: all 300ms;
        transform-origin: top right;
    }

    .buy-show {
        padding: .15rem;
    }

    .bus-show-title {
        height: .37rem;
        line-height: .37rem;
        width: 100%;
        color: #666;
        font-size: .13rem;
    }

    .buy-item-wrap {
        display: inline-block;
        width: 1.7rem;
        height: 2.4rem;
        color: #fff;
        position: relative;
        overflow: hidden;
        -webkit-border-radius: .05rem;
        -moz-border-radius: .05rem;
        border-radius: .05rem;
        margin-bottom: .12rem;
    }

    .buy-item-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: .08rem;
    }
    .small-ball{
        width: 1.6rem;
        height: 1.6rem;
        transform-origin: center center;
        border-radius: 50%;
        z-index: 1;
    }
    .buy-item-wuser {
        padding: .11rem;
        position: relative;
        z-index: 1;
        height: 100%;
        width: 100%;
        border-radius: .05rem;
        overflow: hidden;
        background-color: rgba(0, 0, 0, .2);
        font-size: .14rem;
        flex-direction: column-reverse;
    }

    .buy-user-msg {
        width: 100%;
    }

    .star-light {
        width: 1rem;
        margin-right: .05rem;
    }

    .remark {
        position: absolute;
        top: 0;
        left: .12rem;
        min-width: .4rem;
        height: .2rem;
        color: #fff;
        font-size: .12rem;
        background-color: #F57145;
        border-bottom-left-radius: .05rem;
        border-bottom-right-radius: .05rem;
        text-align: center;
        line-height: .2rem;
    }

    .star-user-header {
        height: .2rem;
        width: .2rem;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        vertical-align: middle;
    }

    .user-like-icon {
        vertical-align: text-top;
        width: .14rem;
        text-shadow: 0 0 .02rem #ccc;
        font-size: .14rem;
    }

    .buy-user-right {
        line-height: .2rem;
    }

    .my-self {
        font-size: .12rem;
        color: #939599;
        padding-left: .1rem;
        font-weight: normal;
    }

    .firend-help-btn {
        padding: .05rem .1rem;
        font-size: .14rem;
        color: #313233;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
        background-color: #FBE54D;
        font-weight: normal;
    }

    .title-top {
        font-size: .16rem;
        color: #313233;
        font-weight: bold;
    }

    .self-title-wrap {
        padding: .15rem 0;
        border-bottom: 1px solid #F0F0F0;
    }

    .self-title-height {
        height: .6rem;
    }

    .buy-show-more {
        width: 100%;
        text-align: center;
        padding: .1rem 0;
    }

    /*.buy-show .scroll-contain {*/
    /*    padding: 0 .11rem;*/
    /*    */
    /*}*/

    .box-buyer-num{
        border-radius: .25rem;
        right: 0%;
        top: -20%;
        position: absolute;
        background: #fff;
        color: #FF4242;
        display: inline-block;
        padding: .04rem .06rem;
        font-size: .12rem;
        transform-origin: right top;
        transform: translate(35%) scale(0.7);
    }

    .buy-user-right-number{
        /*background-color: rgba(0,0,0,.5);*/
        display: inline-block;
        width: .23rem;
        height: .23rem;
        border-radius: .25rem;
        text-align: center;
        line-height: .12rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        .icon-add{
            font-size: .14rem;
        }
        .add-cart-icon{
            width: .23rem;
        }
    }
</style>